<template>
  <div>    
    <div class="nav" >
    <mt-button size="small" @click.native.prevent="active = 'tab-container1'">默认</mt-button>
    <mt-button size="small" @click.native.prevent="active = 'tab-container2'">新品</mt-button>
    <mt-button size="small" @click.native.prevent="active = 'tab-container3'">人气</mt-button>
    </div>
  <div class="page-tab-container">
    <mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>
      <mt-tab-container-item id="tab-container1">
          <ul class="box1">
           <router-link
            v-for="item in lists"
            :key="item.id"
            :to="{name:'detail',
                  params:{
                   id:item.id,
                   img:item.img,
                   titile:item.titile,
                   price:item.price
                 }}"
            >
            <li
            v-for="item in lists"
            :key="item.id"
            class="box1-1"><img :src="item.img"/>
            <span class="tit">{{item.titile}}</span>
            <span class="prc">￥{{item.price}}</span>
            </li>
             </router-link>
          </ul>
      </mt-tab-container-item>
      <mt-tab-container-item id="tab-container2">
        <ul class="box1">
           <router-link
            v-for="item in newlist"
            :key="item.id"
            :to="{name:'detail',
                  params:{
                   id:item.id,
                   img:item.img,
                   titile:item.titile,
                   price:item.price
                 }}"
            >
            <li
            v-for="item in newlist"
            :key="item.id"
            class="box1-1"><img :src="item.img"/>
            <span class="tit">{{item.title}}</span>
            <span class="prc">￥{{item.price}}</span>
            </li></router-link>
          </ul>
      </mt-tab-container-item>
      <mt-tab-container-item id="tab-container3">
        <ul class="box1">
           <router-link
            v-for="item in morelist"
            :key="item.id"
            :to="{name:'detail',
                  params:{
                   id:item.id,
                   img:item.img,
                   titile:item.titile,
                   price:item.price
                 }}"
            >
            <li
            v-for="item in morelist"
            :key="item.id"
            class="box1-1"><img :src="item.img"/>
            <span class="tit">{{item.titile}}</span>
            <span class="prc">￥{{item.price}}</span>
            </li></router-link>
          </ul>
      </mt-tab-container-item>
    </mt-tab-container>
  </div> 
    </div>  
</template>
<script>
import Vue from 'vue'
import * as api from '@/requests/api.js'
export default {
  name: 'Cartlist',
  data () {
    return {
    active: 'tab-container1',
    lists:[],
    newlist:[],
    morelist:[] 
    }
  },
  methods:{
    onclick:function(index){
      if(index==1){
        this.dynamic = index;
      }
         this.dynamic = index;  
       this.subb = index;
    }
  },
  created () {
    this.$http.get(api.CAETLIST)
    .then(resp => {
        this.lists=resp.data.data     
    }),
    this.$http.get(api.HOMELIST)
    .then(resp=> {
        this.newlist=resp.data.data
    }),
    this.$http.get(api.NEWLIST)
    .then(resp=> {
        this.morelist=resp.data.data
    })
  }
}
</script>

<style lang="scss" scoped>
 .active{
  background:#ff9595 ;  
 }
  .nav{
    display: flex;
    justify-content: space-around;    
    .mint-button{
      flex: 1;
      height: 33px;
      width: 75px;
      border: none;   
    }
  }
 .box1{
   display: flex;
   flex-wrap: wrap;
   margin: 0 auto;
     li{
      height: 296px;
      width: 165px;
         margin-left: 18px;
    margin-top: 30px;
    font-size: 12px;
      img{
      margin: 0 auto;
      display: block;
        }
        .prc{
          margin-top: 25px;
          display: block;
          font-size:12px;
          color: #000;
        }
     }
  }
 .nav .mint-button[data-v-31352562]{
   z-index: 1;
 }
 a{
   text-decoration: none;
   color: #000;
 }
 .tit{
   margin-top: 10px;
   display: block;
 }
 img{
   display: block;
   width: 160px;
   height: 215px;
 }
</style>